const ShelvesManagement = {
    template: `
        <div>
            <el-button @click="newShelfDialogVisible = true" plain round :style="buttonStyle">新增货架</el-button>
            <br>
            <el-table :data="shelvesList" :style="tableStyle">
                <el-table-column label="货架编号" prop="shelfId"></el-table-column>
                <el-table-column label="区域">
                    <template #default="{ row }">
                        <!-- 查找 areaList 中 areaId 匹配的 name -->
                        {{ areaList.find(area => area.areaId === row.areaId)?.name || "未知" }}
                    </template>
                </el-table-column>
                <el-table-column label="负责人">
                    <template #default="{ row }">
                        <!-- 查找 userList 中 adminId 匹配的 adminName -->
                        {{ userList.find(user => user.adminId === row.adminId)?.adminName || "未知" }}
                    </template>
                </el-table-column>
                <el-table-column label="容量" prop="capacity"></el-table-column>
                <el-table-column label="操作" width="250" :label-style="{ padding: '5px 10px', textAlign: 'center' }">
              <template #default="{ row }">
                <div style="display: flex; justify-content: space-between;">
                  <el-button 
                    @click="editShelf(row)" 
                    type="primary" 
                    text 
                    size="small"
                    style="margin-left: 10px; border: 1px solid #dcdfe6; padding: 5px 10px; font-size: 12px;"
                  >编辑</el-button>
                  <el-popconfirm 
                    title="确定要删除此区域吗？（操作不可逆）"
                    width="300px"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    confirm-button-type="danger"
                    @confirm="deleteShelf(row.shelfId)"
                  >
                    <template #reference>
                      <el-button 
                        type="danger"
                        primary
                        size="small"
                        style="border: 1px solid #dcdfe6; padding: 5px 10px;font-size: 12px;"
                      >删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
            </el-table>

            <!-- 编辑货架的对话框 -->
            <el-dialog
              v-model="editShelfDialogVisible"
              title="更改货架信息"
              width="400px">

                <el-form :model="currentShelf" label-width="80px" >
                    <el-form-item label="区域">
                        <el-select v-model="currentShelf.areaId" style="width: 250px">
                            <el-option v-for="item in areaList" :label="item.name" :value="item.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="负责人">
                        <el-select v-model="currentShelf.adminId" style="width: 250px">
                            <el-option v-for="item in userList" :label="item.adminName" :value="item.adminId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="容量">
                        <el-input v-model="currentShelf.capacity" type="number" style="width: 250px"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="editShelfDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveShelf">保存</el-button>
                </div>
            </el-dialog>

            <!-- 新增货架的对话框。 -->
            <el-dialog v-model="newShelfDialogVisible" title="新建货架" width="400px">
                <el-form :model="newShelfForm" label-width="80px">
                    <el-form-item label="区域">
                        <el-select v-model="newShelfForm.areaId" style="width: 250px" placeHolder="请选择区域">
                            <el-option v-for="item in areaList" :label="item.name" :value="item.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="负责人">
                        <el-select v-model="newShelfForm.adminId" style="width: 250px" placeHolder="请选择负责人">
                            <el-option v-for="item in userList" :label="item.adminName" :value="item.adminId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="容量">
                        <el-input v-model="newShelfForm.capacity" type="number" style="width: 250px"></el-input>
                    </el-form-item>
                    

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="newShelfDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="onNewShelfFormSubmit">确定</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    `,
    setup() {
        const shelvesList = ref([]);
        const areaList = ref([]);
        const userList = ref([]);

        // 对话框可见性。
        const editShelfDialogVisible = ref(false);
        const newShelfDialogVisible = ref(false);

        // 当前正在编辑的用户数据。
        const currentShelf = ref({
            shelfId: '',
            areaId: '',
            adminId: '',
            capacity: ''
        });


        // 新增库存的表单。
        const newShelfForm = ref({
            areaId: '',
            adminId: '',
            capacity: ''
        })

        // 编辑库存信息。
        const editShelf = (product) => {
            // 将选中的库存数据填充到编辑表单
            currentShelf.value = { ...product };
            editShelfDialogVisible.value = true;
        };


        const saveShelf = () => {
            const params = {
                shelfId: currentShelf.value.shelfId,
                areaId: currentShelf.value.areaId,
                adminId: currentShelf.value.adminId,
                capacity: currentShelf.value.capacity
            }

            console.log(params)

            axios.put("http://localhost:8080/shelf/update", params, {
                headers: {
                    "Content-Type": "application/json",
                },
            }).then((response) => {
                const res = response.data;
                if (res.code === 200) {
                    app.config.globalProperties.$message({
                        message: "信息已更新。",
                        type: "success",
                    });
                }
                else if (res.code === 500) {
                    app.config.globalProperties.$message({
                        message: "信息更新失败。",
                        type: "error",
                    });
                }
            })

            editShelfDialogVisible.value = false;
            window.location.reload();   // 刷新，以显示最新的信息。
        };

        // 确认删除用户的事件。
        const deleteShelf = (id) => {
            axios.delete(`http://localhost:8080/shelf/delete/${id}`).then((response) => {
                const res = response.data;
                if (res.code === 200) {
                    app.config.globalProperties.$message({
                        message: "货架已删除。",
                        type: "success",
                    });
                }
                else if (res.code === 500) {
                    app.config.globalProperties.$message({
                        message: "货架删除失败。",
                        type: "error",
                    });
                }

                window.location.reload();   // 刷新，以显示最新的信息。
            })
        }

        const onNewShelfFormSubmit = () => {
            if (false) {

                // 
            }
            else {
                const params = {
                    areaId: newShelfForm.value.areaId,
                    adminId: newShelfForm.value.adminId,
                    capacity: newShelfForm.value.capacity
                }

                axios.post("http://localhost:8080/shelf/add", params).then((response) => {
                    const res = response.data;
                    if (res.code === 200) {
                        app.config.globalProperties.$message({
                            message: "添加成功。",
                            type: "success",
                        });

                        // 延时刷新以获取最新数据。
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    }
                    else if (res.code === 500) {
                        app.config.globalProperties.$message({
                            message: "添加失败。",
                            type: "error",
                        });
                    }

                    newShelfDialogVisible.value = false;
                })
            }
        }

        const tableStyle = {
            backdropFilter: "blur(10px)",
            WebkitBackdropFilter: "blur(10px)",
            borderRadius: "12px",
            boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
            border: "1px solid rgba(255, 255, 255, 0.4)",
            overflow: "hidden"
        }

        const buttonStyle = {
            width: "100%",
            marginBottom: "10px"
        }

        // 使用 axios 获取数据。
        const fetchShelvesList = async () => {
            try {
                const response = await axios.get("http://localhost:8080/shelf/all");
                if (response.data.code === 200) {
                    shelvesList.value = response.data.data;
                } else {
                    app.config.globalProperties.$message({
                        message: '加载失败: ' + response.data.msg,
                        type: 'error'
                    });
                }
            } catch (error) {
                console.error("请求失败", error);
                app.config.globalProperties.$message({
                    message: '请求失败，请重试。',
                    type: 'error'
                });
            }
        };

        const fetchAreaList = async () => {
            try {
                const response = await axios.get("http://localhost:8080/area/list");
                if (response.data.code === 200) {
                    areaList.value = response.data.data;
                } else {
                    app.config.globalProperties.$message({
                        message: '加载失败: ' + response.data.msg,
                        type: 'error'
                    });
                }
            } catch (error) {
                console.error("请求失败", error);
                app.config.globalProperties.$message({
                    message: '请求失败，请重试。',
                    type: 'error'
                });
            }
        };

        const fetchUserList = async () => {
            try {
                const response = await axios.get("http://localhost:8080/admin/getUserList");
                if (response.data.code === 200) {
                    userList.value = response.data.data;
                } else {
                    app.config.globalProperties.$message({
                        message: '加载失败: ' + response.data.msg,
                        type: 'error'
                    });
                }
            } catch (error) {
                console.error("请求失败", error);
                app.config.globalProperties.$message({
                    message: '请求失败，请重试。',
                    type: 'error'
                });
            }
        };

        // 调用请求方法。
        fetchUserList();
        fetchAreaList();
        fetchShelvesList();

        return {
            shelvesList,
            editShelfDialogVisible,
            currentShelf,
            editShelf,
            saveShelf,
            deleteShelf,
            newShelfForm,
            newShelfDialogVisible,
            onNewShelfFormSubmit,
            userList,
            areaList,
            tableStyle,
            buttonStyle
        };
    }
};